import React,{Component,Fragment} from 'react'
import {CSSTransition} from 'react-transition-group'
import './App.css'

class Transition extends Component{
    constructor(props){
        super(props)
        this.state={
            show:true,
            show2:true
        }
        this.handleToggle = this.handleToggle.bind(this);
        this.handleToggle2 = this.handleToggle2.bind(this);
    }
    render(){
        return(
        <Fragment>
            <div className={this.state.show ? 'show':'hide'}>hello</div>  
            <div className={this.state.show ? 'show2':'hide2'}>world</div>
            <button onClick={this.handleToggle}>toggle 普通</button>
            <br/><br/>


           
            <CSSTransition
                in = {this.state.show2}// 如果this.state.sho2从false变为true，则动画入场，反之out出场
                timeout={1000}//动画执行1秒
                classNames='fade' //自定义的class名
                unmountOnExit={true} // 为true 代表退出的时候移除dom
                appear={true} // 为true  渲染的时候就直接执行动画，默认false，
                onEntered={(el) => {
                    el.style.color='blue'   //可选，动画入场之后的回调，el指被包裹的dom，让div内的字体颜色等于蓝色
                }}
                onExited={() => {
                  //同理，动画出场之后的回调，也可以在这里来个setState啥的操作
                }}
            >
                <div>你好wang</div>
            </CSSTransition>
            <button onClick={this.handleToggle2}>CSSTransition 组件</button>
            <br/><br/><br/>
        </Fragment> 
        )
    }

    handleToggle(){
        this.setState(()=>{
            return{
                show:!this.state.show
            }
        })      
    }

    handleToggle2(){
        this.setState(()=>{
            return{
                show2:!this.state.show2
            }
        })      
    }
}

export default Transition;